<!-- 柱状图 -->
<template>
	<div>
		<!-- <div class="title"><p>{{title}}</p></div> -->
		<div ref="barchart" id="barchart" :style="{ height: height, width: width }"></div>
	</div>
</template>

<script>
export default {
	data() {
		return {};
	},
	props: {
		title: {
			type: String,
			default: '显示日统计趋势'
		},
		width: {
			type: String,
			default: '100%'
		},
		height: {
			type: String,
			default: '350px'
		},
		chartData: {
			type: Object,
			required: true
		}
	},
	watch: {
		chartData: {
			deep: true,
			handler(val) {
				// this.setOptions(val)
				if (!val || val?.series?.length === 0) {
					const dom = document.getElementById('barchart');
					dom.innerHTML = '<div class="el-table__empty-block"><span class="el-table__empty-text">暂无数据</span></div>';
					dom.removeAttribute('_echarts_instance_');
				} else {
					this.setOptions(val)
				}
			}
		}
	},
	//生命周期 - 创建完成（访问当前this实例）
	created() { },
	//生命周期 - 挂载完成（访问DOM元素）
	mounted() {
		if (!this.chartData || this.chartData?.series?.length === 0) {
			const dom = document.getElementById('barchart');
			dom.innerHTML = '<div class="el-table__empty-block"><span class="el-table__empty-text">暂无数据</span></div>';
			dom.removeAttribute('_echarts_instance_');
		} else {
			this.setOptions(this.chartData)
		}
	},
	methods: {
		setOptions(chartData) {
			this.myChart = this.$echarts.init(this.$refs.barchart, 'macarons')
			this.myChart.setOption({
				xAxis: {
					type: 'category',
					data: chartData.xAxis
				},
				yAxis: {
					type: 'value'
				},
				tooltip: {
					trigger: "item",
					backgroundColor: '#fff',
					textStyle: {
						color: '#000'
					}
				},
				series: [
					{
						data: chartData.series,
						type: 'bar',
						barWidth: 50,
						itemStyle: {
							color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
								{ offset: 0, color: '#83bff6' },
								{ offset: 0.5, color: '#188df0' },
								{ offset: 1, color: '#188df0' }
							])
						}
					}
				]
			})
			this.myChart.off('click');
			this.myChart.on('click', (params) => {
				this.$emit('barclick', params.name, this.title)
			});
		}
	}
};
</script>
<style scoped></style>